import React from 'react';
import classnames from 'classnames';
import ReCombo from '../ReCombo';
import ReButton from '../ReButton';
import ReSelectField from '../ReSelectField';

export default class view extends React.Component {
    static propTypes = {
        className: React.PropTypes.string,
        list: React.PropTypes.array.isRequired,
        thumb: React.PropTypes.string,
        value: React.PropTypes.string,
        buttonLabel: React.PropTypes.string,
        onButtonClick: React.PropTypes.func,
        onChange: React.PropTypes.func.isRequired,
    };

    constructor(props, context) {

        super(props, context);


        // init state;
        this.state = {
            thumb: props.thumb,
            value: props.value,
            list: props.list,
            isShow: false
        };
    }
    componentWillMount() {
        this._isMounted = true;
    }

    componentDidMount() {

    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            thumb: nextProps.thumb,
            value: nextProps.value,
            list: nextProps.list
        });
    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    handleChange(item) {
        this.props.onChange && this.props.onChange(item);
    }

    renderHeader() {
        return (
            <div className="graph-combo-header">
                <img src={this.state.thumb} />
            </div>
        );
    }

    renderContent() {
        return (
            <div className="graph-combo-content">
                <ReButton
                    className="graph-btn"
                    label={this.props.buttonLabel}
                    onClick={ (e)=> { this.props.onButtonClick && this.props.onButtonClick(e); }}
                />
                <ReSelectField
                    className="graph-list"
                    onChange={ item=> { this.handleChange(item); } }
                    value={this.props.value}
                    list={this.props.list}
                />
            </div>
        );
    }

    render() {
        const classNames = classnames({
            'orin-sw-regraphcombo-root': true,
            [this.props.className] : this.props.className ? true : false
        });
        return (
            <div className={classNames} >
                <ReCombo
                    header={this.renderHeader()}
                    content={this.renderContent()}
                    isShow={this.state.isShow}>
                </ReCombo>
            </div>
        );
    }
}
